<script>
	$(document).ready(function(){
		
                initTable();
		list_user = $('#list_service').dataTable({
                        //"sScrollX": "80%",
                        //"sScrollXInner": "100%",
                        
			"bFilter" : true,
			"bJQueryUI" : true,
			"sPaginationType": "full_numbers",
			"oLanguage": {
				"sLengthMenu": "Menampilkan _MENU_ data",
				"sZeroRecords": "Belum ada data yang tersimpan",
				"sInfoFiltered": "(Hasil filter dari _MAX_ yang didapat)"
			}
		});
                $('#list_service tbody tr').live('click',function(){
                var aData = list_user.fnGetData(this);
                var kamar_id = aData[0];
                $.post("<?php echo KAMAR ?>get_kamar", "kamar="+kamar_id, function(data){
                    var arr = $.parseJSON(data);
                    $("#nama-kamar").text(arr['nama_kamar']);
                    $("#harga-kamar").text(arr['harga']);
                    $("#status-kamar").text(arr['status_huni']);
                    $("#kapasitas-kamar").text(arr['kapasitas']);
                    $("#kredit-kamar").text(arr['limit_kredit']);
                    $("#kategori-kamar").text(arr['kategori_kamar']);
                    //$("#hidden-current-kamar").val() = arr['id'];
                   // alert($("#hidden-current-cell").val());
                }
            );
             });
             $('#list_service tbody tr td').live('click',function(){
                 $("#hidden-current-cell").val(this.firstChild.data)
                 //alert(this.firstChild.data);
                 
             });
                $("#month-selector").change(function() {
                    month_change();
                    list_user.fnDraw();
                    })
	});
        function daysInMonth(iMonth, iYear)	{
                        return 32 - new Date(iYear, iMonth, 32).getDate();
                }
        function initTable()
        {
            var tanggal = new Date();
            var month = tanggal.getMonth();
            $("#month-selector").val(month).attr('selected',true);
            var year = tanggal.getYear();
            var JumlahHari = daysInMonth(month, year);
            var JumlahKamar = <?php echo count($list_kamar) ?>;
            for(var i = 0;i<JumlahHari;i++)
                $("#header-tabel").append("<th width='100'>"+(i+1)+"</th>");
            for(var i = 0;i<JumlahKamar;i++)
                {
                    for(var j = 0;j<JumlahHari;j++)
                        $("#kamar-"+i).append("<td align='center' style='background-color: blue'>"+(j+1)+"</td>");
                }
        }
        
        function month_change()
        {
            var tanggal = new Date();
            var month = $("#month-selector").val();
            var year = tanggal.getYear();
            var JumlahHari = daysInMonth(month, year);
            var JumlahKamar = <?php echo count($list_kamar) ?>;
            $("#header-tabel").empty();
            $("#header-tabel").append("<th width='50'>Nama Kamar</th>");
            for(var i = 0;i<(JumlahHari);i++)
                {
                $("#header-tabel").append("<th width='100'>"+(i+1)+"</th>");
                }
            <?php for ($i = 0; $i < count($list_kamar); $i++) { ?>
                
                    $("#kamar-<?php echo $i ?>").empty();
                    $("#kamar-<?php echo $i ?>").append("<td align='center' ><?php echo $list_kamar[$i]['nama'] ?><input type='hidden' value='<?php echo $list_kamar[$i]['id'] ?>'</a></td>");
                    for(var j = 0;j<JumlahHari;j++)
                        $("#kamar-<?php echo $i ?>").append("<td align='center' style='background-color: blue'>"+(j+1)+"</td>");
                <?php } ?>
                    //$("#header-tabel").empty();
        }
</script>
<style>
	th{
		cursor: pointer;
	}
	td{
		cursor: pointer;
	}
	th .ui-icon {
		display :none;
	}
</style>
<div style="width : 700px;margin : 0 auto;">
    <select name="month" id="month-selector">
        <option value="0">Januari</option>
        <option value="1">Februari</option>
        <option value="2">Maret</option>
        <option value="3">April</option>
        <option value="4">Mei</option>
        <option value="5">Juni</option>
        <option value="6">Juli</option>
        <option value="7">Agustus</option>
        <option value="8">September</option>
        <option value="9">Oktober</option>
        <option value="10">November</option>
        <option value="11">Desember</option>
    </select>
<table id="list_service" width="700" border="0">
	<thead>
		<tr id="header-tabel">
			<th width="50">Nama Kamar</th>
		</tr>
	</thead>
	<tbody>
		<?php for ($i = 0; $i < count($list_kamar); $i++) { ?>
			<tr id="kamar-<?php echo $i ?>">
                            <td align="center" ><?php echo $list_kamar[$i]['nama'] ?><input type='hidden' value='<?php echo $list_kamar[$i]['id'] ?>' /></a></td>
			</tr>
		<?php } ?>
	</tbody>
</table>
    <input type="hidden" id="hidden-current-cell" />
<h3 class="center">INFORMASI KAMAR</h3>
	<table class="tabelket" width="600px">
	<tr>
		<td class="right" width="50%">Kategori kamar:</td>
		<td class="left" width="50%"><b id="kategori-kamar"></b></td>
	</tr>
	<tr>
		<td class="right">Nama kamar:</td>
		<td class="left"><b id="nama-kamar"></b></td>
	</tr>
	<tr>
		<td class="right">Harga:</td>
		<td class="left"><b id="harga-kamar"></b></td>
	</tr>
	<tr>
		<td class="right">Kapasitas:</td>
		<td class="left"><b id="kapasitas-kamar"></b></td>
	</tr>
	<tr>
		<td class="right">Status huni:</td>
		<td class="left"><b id="status-kamar"></b></td>
	</tr>
	<tr>
		<td class="right">Limit kredit:</td>
		<td class="left"><b id="kredit-kamar"></b></td>
	</tr>
	</table>
    
</div>